<template>
	<view class="details">
		<view class="content">
			<view class="header">
				<view class="title">{{datalist.name}}找活</view>
				<view class="message">
					<view class="lcoation">
						<image src="../../../../static/image/job/location1.png"></image>
						<text v-if="datalist.state_name!=datalist.city_name">{{datalist.state_name}}<text v-if="datalist.city_name">{{datalist.city_name}}</text></text>
						<text v-else>{{datalist.state_name}}</text>
					</view>
					<view class="lcoation date">
						<image src="../../../../static/image/job/date.png"></image>
						<text>{{create_date}}</text>
					</view>
				</view>
			</view>
			<view class="baseinfo">
				<view class="subtitle">基础信息</view>
				<view class="baseinfo_details">
					<view><text>1.隶属单位：</text><text>{{datalist.company}}</text></view>
					<view><text>2.找活工种：</text><text>{{datalist.work_type_name}}</text></view>
					<view>
						<text>3.工人人数：</text>
						<view>{{datalist.number}}人</view>
					</view>
					<view><text>4.空闲时间：</text> <text>{{datalist.begin_date}}至{{datalist.end_date}}</text></view>
					<view class="requirement">
						<text>5.承接区域：</text>
						<text v-if="datalist.state_name!=datalist.city_name">{{datalist.state_name}}<text v-if="datalist.city_name">{{datalist.city_name}}</text></text>
						<text v-else>{{datalist.state_name}}</text>
					</view>
				</view>
			</view>
			<view class="tel">
				<view class="subtitle">联系方式</view>
				<view class="tel_details">
					<!-- <view>
						<text>发布方</text>
						<text>{{datalist.company}}</text>
					</view> -->
					<view><text>联系人：</text><text>{{datalist.contacts}} </text></view>
					<!-- <view><text>2.联系方式：</text><text>{{datalist.contacts_method}} </text></view> -->
				</view>
			</view>
		</view>
		<view class="sale">
			<view class="browse">
				已浏览：{{datalist.visit_num}} 已联系：{{datalist.contact_num}}
			</view>
			<view v-if="datalist.in_from_sale">
				<view class="edit" v-if="isshow=='1'">
					<view class="shelf" @click="reasonshow=true">下架</view>
					<view @click="gotoedit">编辑</view>
				</view>
				<view class="contact" @click="contact" v-if="isshow=='2' && userInfo.uid!=datalist.user_id&&userInfo.account_type!='工人'">
					<view>联系对方</view>
				</view>
			</view>
		</view>
		<u-popup v-model="reasonshow" mode="bottom" border-radius="54" closeable="true" @close="close">
			<view class="all">
				<view class="reason">下架原因</view>
				<view class="shelf_reason">
					<u-radio-group v-model="val" @change="radioGroupChange" wrap="true">
						<u-radio 
							@change="radioChange($event,index)" 
							v-for="(item, index) in list" :key="index" 
							:name="item.name"
							:disabled="item.disabled"
						>
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
				<view class="operation">
					<view class="cancel" @click="cancel">取消</view>
					<view class="determine" @click="determine">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import api from '@/static/js/api.js'
	
	export default {
		data() {
			return {
				isshow:null,
				reasonshow:false,
				latitude: 31.398727, //纬度
				longitude: 120.652941, //经度
				scale: 16, //缩放级别
				markers: [{
					address: '苏州市相城区',
					title: '苏州忠诚劳务有限公司',
					id: 11,
					latitude: 31.398727,
					longitude: 120.652941,
					iconPath: "../../../../static/image/job/location1.png",
					width: 22,
					height: 26,
					callout: { //marker气泡
						content: '苏州忠诚劳务有限公司',
						color: "#000",
						bgColor: "#fff",
						borderRadius: 10,
						fontSize: 14,
						textAlign: "center",
						padding: 10,
						display: 'ALWAYS',
					}
				}],
				list: [
					{
						name: '已从其他途径找活',
						disabled: false,
						id:8
					},
					{
						name: '找活信息已失效',
						disabled: false,
						id:6
					},
					{
						name: '没有生成订单，但已完成线下找活',
						disabled: false,
						id:7
					},
					{
						name: '其他原因',
						disabled: false,
						id:5
					}
				],
				reasonindex:'',
				work_id:'',
				userInfo:{},
				datalist:[],
				create_date:'',
				val:''
			}
		},
		onLoad(e) {
			// console.log(e);
			this.isshow = e.isshow
			this.work_id = e.id
		},
		onShow() {
			if (uni.getStorageSync('userInfo')) {
				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			}
			this.getdata()
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e,i) {
				// console.log(e);
				// console.log(i);
				this.list.forEach(item=>{
					if(item.name==e){
						this.reasonindex = item.id
					}
				})
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			close(){
				this.reasonindex = ''
				this.val = ''
			},
			cancel(){
				this.reasonindex = ''
				this.val = ''
				this.reasonshow = false
			},
			determine(){
				if(this.reasonindex==''){
					uni.showToast({
						icon: 'none',
						title: '请选择下架原因'
					})
				}else{
					api.recruitmentShelf('jhj.recruitment.release','_api_recruit_work_off_shelf',this.userInfo.access_token,this.reasonindex,'',this.work_id).then(res=>{
						if(res.errcode==0){
							this.reasonshow = !this.reasonshow
							uni.navigateBack()
						}
					})
				}
			},
			gotoedit(){
				uni.navigateTo({
					url: `/pagesB/mine/job/releaseJob?state=false&&id=${this.work_id}&&datalist=`+JSON.stringify(this.datalist)
				})
			},
			getdata(){
				api.jobDetails('jhj.work.information.release','_api_work_detail',this.userInfo.access_token,this.userInfo.uid,this.work_id).then(res=>{
					this.datalist = res.data[0]
					this.create_date = res.data[0].create_date.split(' ')[0]
					uni.setStorageSync('user_id', res.data[0].user_id)
					uni.setStorageSync('datalist', JSON.stringify(res.data[0]))
				})
			},
			contact(){
				uni.setStorageSync('image_1920', JSON.stringify(this.datalist.image_1920))
				var type = '找活订单'
				uni.navigateTo({
					url:`/pages/main/chat/chatroom?type=${type}&&id=${this.datalist.id}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.details {
		.content {
			padding: 0 30rpx;
			height: calc(100vh - 154rpx);
			position: relative;
			overflow-y: auto;
			.header {
				height: 190rpx;
				border-bottom: 2rpx solid #E8E9EE;
				padding: 36rpx 0 24rpx;

				.title {
					font-size: 54rpx;
					font-weight: bold;
					color: #333333;
				}

				.message {
					display: flex;
					align-items: center;
					margin-top: 24rpx;

					.lcoation {
						display: flex;
						align-items: center;

						image {
							width: 22rpx;
							height: 26rpx;
						}

						text {
							font-size: 26rpx;
							color: #333333;
							margin-left: 6rpx;
						}
					}

					.date {
						margin-left: 60rpx;

						image {
							width: 26rpx;
						}
					}
				}
			}

			.subtitle {
				font-size: 34rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 22rpx;
			}

			.baseinfo {
				padding: 46rpx 0 30rpx;
				border-bottom: 2rpx solid #E8E9EE;

				.baseinfo_details {
					font-size: 26rpx;
					color: #333333;

					>view {
						display: flex;
						align-items: center;
						line-height: 46rpx;

						text {
							height: 100%;
						}
					}

					.requirement {
						align-items: flex-start;

						text:last-child {
							flex: 1;
						}
					}
				}
			}

			.tel {
				padding: 46rpx 0 30rpx;
				border-bottom: 2rpx solid #E8E9EE;

				.tel_details {
					view {
						line-height: 46rpx;
						color: #333333;
						font-size: 26rpx;
					}
				}
			}
		}
		.sale{
			position: fixed;
			bottom: 0;
			width: 100%;
		}
		.browse {
			width: 100%;
			text-align: right;
			font-size: 26rpx;
			color: #999999;
			// position: fixed;
			// bottom: 155rpx;
			height: 74rpx;
			background: #fff;
			padding: 18rpx 30rpx 0 0;
		}
		.contact {
			width: 100%;
			height: 154rpx;
			padding: 20rpx 30rpx 0;
			border-top: 2rpx solid #E8E9EE;
			// position: fixed;
			// bottom: 0;
			view{
				height: 94rpx;
				background: linear-gradient(146deg, #FE4D60 5%, #FF7C89 100%);
				border-radius: 4px;
				font-size: 34rpx;
				color: #FFFFFF;
				line-height: 94rpx;
				text-align: center;
			}
		}
		.edit{
			width: 100%;
			height: 154rpx;
			padding: 20rpx 30rpx 0;
			border-top: 2rpx solid #E8E9EE;
			// position: fixed;
			// bottom: 0;
			display: flex;
			justify-content: space-between;
			view{
				width: 325rpx;
				height: 94rpx;
				background: linear-gradient(146deg, #FE4D60 5%, #FF7C89 100%);
				border-radius: 4rpx;
				line-height: 94rpx;
				text-align: center;
				font-size: 34rpx;
				color: #fff;
			}
			.shelf{
				background: #fff;
				border: 2rpx solid #ED4D59;
				color: #333333;
			}
		}
		.all{
			padding: 30rpx 60rpx 40rpx;
			height: 660rpx;
			.reason{
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				text-align: center;
			}
			.shelf_reason{
				margin-top: 36rpx;
			}
			.operation{
				display: flex;
				justify-content: space-between;
				margin-top: 94rpx;
				view{
					width: 325rpx;
					height: 94rpx;
					border-radius: 4rpx;
					border: 2rpx solid #ED4D59;
					color: #000;
					font-size: 34rpx;
					text-align: center;
					line-height: 94rpx;
				}
				.determine{
					background: linear-gradient(146deg, #FE4D60 5%, #FF7C89 100%);
					border-radius: 4rpx;
					color: #fff;
				}
			}
		}
	}
	/deep/.u-radio__icon-wrap--checked{
		border-color: #00BA3B!important;
		background-color: #00BA3B!important;
	}
	/deep/.u-radio{
		height: 64rpx!important;
	}
</style>
